<!DOCTYPE html>
<html>
<head>
	<title>计算器</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery.min.js"></script>
	<style type="text/css">
		table,td {
			border: 0px solid black;
			border-collapse: collapse;
		}
		td div{
			width: 80px;
			height: 80px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		button{
			border: 0px solid black;
			border-radius: 5px;
			color: black;
			background-color: #c0c0c0;
			width: 70px;
			height: 70px;
			font-size: 30px;
		}
		button:focus{
			outline: none;
		}
		button:hover{
			background-color: #ecf0f1;
		}
		#old{
			width: 95%;
			height: 30px;
			border: 0px;
			/*padding: 0px;*/
			background-color: #c0c0c0;
			border-radius: 5px;
			border: 1px solid black;
			font-size: 20px;
			padding-left: 5px;
		}
		#show{
			width: 95%;
			height: 40px;
			border: 0px;
			/*padding: 0px;*/
			background-color: #c0c0c0;
			border-radius: 5px;
			border: 1px solid black;
			font-size: 20px;
			padding-left: 5px;
		}
		#show:focus{
			outline: none;
		}
	</style>
</head>
<body>
	<div style="width: 100%;height: 700px;display: flex;justify-content: center;align-items: center;flex-direction: column;">
		<h3>计算器(双击back清空)</h3>
		<table>
			<tr>
				<td colspan="3">
					<div style="width: 100%;padding: 0px;flex-direction: column;">
						<input style="border-radius: 0px;border: 0px;font-size: 15px;" id="old" type="text" name="" readonly="true" placeholder="">
						<input style="border-radius: 0px;border: 0px;" id="show" type="text" name="" readonly="true" placeholder="">
					</div>
				</td>
				<td>
					<div><button ondblclick="clear()" id="back">back</button></div>
				</td>
			</tr>
			<tr>
				<td>
					<div><button id="7">7</button></div>
				</td>
				<td>
					<div><button id="8">8</button></div>
				</td>
				<td>
					<div><button id="9">9</button></div>
				</td>
				<td>
					<div><button id="/">/</button></div>
				</td>
			</tr>
			<tr>
				<td>
					<div><button id="4">4</button></div>
				</td>
				<td>
					<div><button id="5">5</button></div>
				</td>
				<td>
					<div><button id="6">6</button></div>
				</td>
				<td>
					<div><button id="*">*</button></div>
				</td>
			</tr>
			<tr>
				<td>
					<div><button id="1">1</button></div>
				</td>
				<td>
					<div><button id="2">2</button></div>
				</td>
				<td>
					<div><button id="3">3</button></div>
				</td>
				<td>
					<div><button id="-">-</button></div>
				</td>
			</tr>
			<tr>
				<td>
					<div><button id="0">0</button></div>
				</td>
				<td>
					<div><button id=".">.</button></div>
				</td>
				<td>
					<div><button id="=">=</button></div>
				</td>
				<td>
					<div><button id="+">+</button></div>
				</td>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		var showText = $("#show")[0];
		var oldText = $("#old")[0];
		var old = ""
		var now = "";  //当前的文本内容
		var state = 1;  //1表示输入,0表示出现答案模式
		function show(now){
			showText.value = now;
		}

		function back(){
			if(now.length >= 1 && state == 1){
				now = now.substr(0,now.length-1);
				console.log(now);
				show(now);
			}
		}

		function checkState(){
			if(state==0){
				now="";
				state=1;
			}
		}

		function lastCharIsNum(){
			var lastChar = now.charAt(now.length-1);
			console.log(lastChar);
			return !isNaN(lastChar);
		}

		function addSymbol(char){
			if(lastCharIsNum() == true){
				now+=char;
			}
		}

		function getAns(){
			console.log(now);
			if(lastCharIsNum()==true){
				state = 0;
				old = now;
				oldText.value = old;
				now=eval(now);
				ansStr = now + "";
				place = ansStr.indexOf(".");//获得小数点所在位置
				if(ansStr.length - place > 10){
					ansStr = ansStr.substr(0,place + 5);
					console.log(ansStr);
					now = eval(ansStr);
				}
			}
		}

		function getFloatNum(){
			now += '.';
		}

		//通过js的方式进行事件的绑定才能正常获得id属性
		$('button').bind('click',function(){
			var char = $(this).attr('id');
			switch(char){
				case 'back':back();break;
				case '/':addSymbol(char);break;
				case '*':addSymbol(char);break;
				case '-':addSymbol(char);break;
				case '+':addSymbol(char);break;
				case '=':getAns();break;
				case '.':getFloatNum();break;
				default :checkState(),now+=char;break;
			}
			show(now);
		})
		$('#back').bind('dblclick',function(){
			now = "";
			show(now);
			old = "";
			oldText.value = old;
			state = 1;  //此时无论如何都要把状态切换到输入
		});
	</script>
</body>
</html>